<template>
  <div class="patient-info-container">
      <el-alert
      v-if="!hasUserId"
      title="识别用户失败!"
      type="error"
      description="没有识别出用户，请点击患者列表的查看按钮"
      show-icon
      class="no-id-alert"
    />

    <el-card v-for="user in [user]" :key="user.id" class="user-card" shadow="hover">
      <div slot="header" class="card-header">
        <span>{{ user.name }} 的信息</span>
      </div>

      <el-row :gutter="20" class="user-info-row">
        <el-col :span="24" class="red-text">
          <strong>ID:</strong> {{ user.id }}
        </el-col>
        <el-col :span="24" class="red-text">
          <strong>姓名:</strong> {{ user.name }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>住院号及账号:</strong> {{ user.admission_no }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>身份证号码及账号:</strong> {{ user.identity_card }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>诊断:</strong> {{ user.diagnosis }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>合并疾病:</strong> {{ user.comorbidity }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>年龄:</strong> {{ user.age }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>治疗方式:</strong> {{ user.therapeutic_modality }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>性别:</strong> {{ user.gender }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>生育史:</strong> {{ user.fertility_history }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>入院日期:</strong> {{ formatDate(user.inhospital_time) }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>入院时体温:</strong> {{ user.temperature }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>入院时脉搏:</strong> {{ user.pulse }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>入院时呼吸:</strong> {{ user.respiration_rate }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>入院时血压:</strong> {{ user.blood_pressure }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>出院日期:</strong> {{ formatDate(user.outhospital_time) }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>出院时体温:</strong> {{ user.temperature_out }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>出院时脉搏:</strong> {{ user.pulse_out }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>出院时呼吸:</strong> {{ user.respiration_rate_out }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>出院时血压:</strong> {{ user.blood_pressure_out }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>2个月时体温:</strong> {{ user.temperature_2_months }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>2个月时脉搏:</strong> {{ user.pulse_2_months }}
        </el-col>
		      <el-col :span="24" class="red-text">
          <strong>2个月时呼吸:</strong> {{ user.respiration_rate_2_months }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>2个月时血压:</strong> {{ user.blood_pressure_2_months }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>婚姻:</strong> {{ user.marital_status }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>受教育程度:</strong> {{ user.education_level }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>职业:</strong> {{ user.occupation }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>医疗费用承担方式:</strong> {{ user.methods_of_medical_cost_coverage }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>居住地:</strong> {{ user.address }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>电话:</strong> {{ user.phone }}
        </el-col>
		    <el-col :span="24" class="red-text">
          <strong>备注:</strong> {{ user.notes }}
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { patientUserInfo } from '@/api/nurse/patient_user_info'; // 导入查询接口

export default {
  name: 'Hzlbbyuser',
  data() {
    return {
      user: {}, // 初始化为空对象
      hasUserId: true // 添加标识，判断是否有 userId
    };
  },
  created() {
    this.fetchUserInfo(); // 在页面加载时调用方法获取用户信息
  },
  methods: {
    fetchUserInfo() {
      const userId = this.$route.query.id // 获取传递的 id
      if (!userId) {
        this.hasUserId = false; // 没有获得 userId
        this.listLoading = false; // 停止 loading
        return; // 直接返回，停止后续执行
      }

      if (userId) {
        patientUserInfo({ id: userId }).then((response) => {
          this.user = {
            id: response.data.userinfo[0][0],
            name: response.data.userinfo[0][1],
            admission_no: response.data.userinfo[0][2],
            identity_card: response.data.userinfo[0][3],
            diagnosis: response.data.userinfo[0][4],
            comorbidity: response.data.userinfo[0][5],
            age: response.data.userinfo[0][6],
            therapeutic_modality: response.data.userinfo[0][7],
            gender: response.data.userinfo[0][8],
            fertility_history: response.data.userinfo[0][9],
            inhospital_time: response.data.userinfo[0][10],
            temperature: response.data.userinfo[0][11],
            pulse: response.data.userinfo[0][12],
            respiration_rate: response.data.userinfo[0][13],
            blood_pressure: response.data.userinfo[0][14],
            outhospital_time: response.data.userinfo[0][15],
            temperature_out: response.data.userinfo[0][16],
            pulse_out: response.data.userinfo[0][17],
            respiration_rate_out: response.data.userinfo[0][18],
            blood_pressure_out: response.data.userinfo[0][19],
            temperature_2_months: response.data.userinfo[0][20],
            pulse_2_months: response.data.userinfo[0][21],
            respiration_rate_2_months: response.data.userinfo[0][22],
            blood_pressure_2_months: response.data.userinfo[0][23],
            marital_status: response.data.userinfo[0][24],
            education_level: response.data.userinfo[0][25],
            occupation: response.data.userinfo[0][26],
            methods_of_medical_cost_coverage: response.data.userinfo[0][27],
            address: response.data.userinfo[0][28],
            phone: response.data.userinfo[0][29],
            notes: response.data.userinfo[0][30],
            create_time: response.data.userinfo[0][31],
            update_time: response.data.userinfo[0][32],
            roles: response.data.userinfo[0][34],
            group_class: response.data.userinfo[0][35]
          };
        }).catch((error) => {
          console.error('获取患者信息时发生错误:', error);
        });
      } else {
        console.error('未找到传递的用户 ID');
      }
    },
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, '0');
      const day = d.getDate().toString().padStart(2, '0');
      const hours = d.getHours().toString().padStart(2, '0');
      const minutes = d.getMinutes().toString().padStart(2, '0');
      const seconds = d.getSeconds().toString().padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  },
};
</script>

<style scoped>
.patient-info-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-card {
  width: 60%;
  margin: 20px 0;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
  max-width: 800px;
}

.card-header {
  font-size: 23px;
  font-weight: bold;
  color: #409EFF;
}

.user-info-row {
  margin-top: 10px;
}

.user-info-row .el-col {
  margin-bottom: 10px;
}

.red-text {
  color: red; /* 设置文字为红色 */
}

.user-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>

<style scoped>
::v-deep .no-id-alert .el-alert__title {
  font-size: 24px; /* 调整标题字体大小 */
}

::v-deep .no-id-alert .el-alert__description {
  font-size: 18px; /* 调整描述字体大小 */
}

.no-id-alert {
  margin-bottom: 20px;
}
</style>
